<template>
    <div class="arrange">
        <el-tabs type="border-card">
            <el-tab-pane label="排班情况">
                <el-row :gutter="5">
                    <el-col :span="6">
                        <el-date-picker v-model="arrangeTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" :clearable="false">
                        </el-date-picker>
                        <!-- <el-date-picker type="date" placeholder="选择日期" v-model="arrangeTime" style="width: 200px;margin-left:30px"></el-date-picker> -->
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" round @click="findAllArrange">查询</el-button>
                    </el-col>
                </el-row>
                <div style="height:500px">
                    <!-- 挂号表格信息 -->
                    <el-table :data="arranges" border style="width: 100%; margin-top:50px;">
                        <el-table-column prop="arrangeId" label="排班"> </el-table-column>
                        <el-table-column prop="doctorName" label="医生姓名"> </el-table-column>
                        <el-table-column prop="depName" label="科室"> </el-table-column>
                        <el-table-column prop="arrangeTime" label="安排时间"> </el-table-column>
                        <!-- show-overflow-tooltip="true" -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="open(scope.row)" size="small">取消排班</el-button>
                                &nbsp;&nbsp;
                                <el-button type="text" @click="handleClick(scope.row)" size="small">调整</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <el-dialog title="修改排班时间" :visible.sync="updateFormVisible">
                    <div>科室： {{arr.depName}}</div>
                    <div>姓名： {{arr.doctorName}}</div>
                    <el-date-picker v-model="arr.arrangeTime" type="date" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd" :clearable="false">
                    </el-date-picker>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="updateFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateArrange">确 定</el-button>
                    </div>
                </el-dialog>

                <div class="block" :span="8" style="margin-left:450px">
                    <!-- <span class="demonstration">大于 7 页时的效果</span> -->
                    <el-pagination layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size"
                        :current-page="pageData.current" @current-change="handleChange">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <!-- 管理排班 -->
            <el-tab-pane label="排班管理">
                <el-form>

                    <el-form-item label="科室" :label-width="formLabelWidth">
                        <el-select v-model="depId" placeholder="选科室" @change="findDoctors" filterable>
                            <el-option v-for="pp in departments" :key="pp.depId" :label="pp.depName" :value="pp.depId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医生" :label-width="formLabelWidth">
                        <el-select v-model="docId" placeholder="选医生" @change="findDoctorName" filterable>
                            <el-option v-for="dd in doctors" :key="dd.doctorId" :label="dd.doctorName"
                                :value="dd.doctorId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排班时间" style="margin-left:450px">
                        <el-col :span="16">

                            <el-date-picker v-model="arrangeTime2" type="date" placeholder="选择排班日期"
                                :picker-options="dateRange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                                :clearable="false" style="width: 200px;">
                            </el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                    </el-form-item>
                    <el-form-item style="margin-left:550px">
                        <el-button type="primary" @click="changeDate">添加</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog title="确认排班" :visible.sync="showFormVisible">
                    <div>科室： {{arr.depName}}</div>
                    <div>姓名： {{arr.doctorName}}</div>
                    <div>日期： {{time1}}</div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addArrange">确 定</el-button>
                    </div>
                </el-dialog>

            </el-tab-pane>


        </el-tabs>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                dateRange: {
                    disabledDate(time) {
                        return new Date(time).getTime() < new Date().getTime()
                    }
                },
                arranges: [{
                    arrangeId: "",
                    doctorName: "",
                    depName: "",
                    doctorId: "",
                    depId: "",
                    arrangeTime: ""
                }],
                arr: {
                    arrangeId: "",
                    doctorName: "",
                    depName: "",
                    doctorId: "",
                    depId: "",
                    arrangeTime: ""
                },
                pageData: {
                    size: 8,
                    total: 0,
                    current: 1
                },
                arrangeTime: "",
                departments: "",
                depId: "",
                doctors: "",
                docId: "",
                showFormVisible: false,
                updateFormVisible: false,
                formLabelWidth: "500px",
                time1: "",
                arrangeTime2: "",
            }
        },
        methods: {
            handleClick(row) {
                this.updateFormVisible = true
                this.arr.arrangeTime = row.arrangeTime
                this.arr.arrangeId = row.arrangeId
                this.arr.doctorName = row.doctorName
                this.arr.depName = row.depName
            },
            updateArrange() {
                this.$http.post("http://localhost:8088/updateArrange", this.arr)
                    .then(resp => {
                        if (resp.data.success == true) {
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });
                            this.updateFormVisible = false
                        }
                        this.pageData.current = 1
                        this.findAllArrange()
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            open(row) {
                // alert(row.arrangeId)
                this.arr.arrangeId = row.arrangeId
                this.$confirm('是否确定取消该排班?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    })
                    .then(() => {
                        this.$http.get("http://localhost:8088/delArrange", {
                                params: {
                                    arrangeId: this.arr.arrangeId
                                }
                            })
                            .then(resp => {
                                // alert(resp.data.message)
                                if (resp.data.success == true) {
                                    this.$message({
                                        type: 'success',
                                        message: '已取消'
                                    });
                                    this.findAllArrange();
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消操作'
                        });
                    });
            },
            findAllArrange() {
                this.findAllDepartment();
                console.log(this.arrangeTime)
                // alert("=====")
                this.$http.get("http://localhost:8088/findAllArrange", {
                        params: {
                            arrangeTime: this.arrangeTime,
                            current: this.pageData.current,
                            size: this.pageData.size
                        }
                    })
                    .then(resp => {
                        console.log(resp.data.data); //打印的是result里面的data 即为ipage对象
                        console.log("total为" + resp.data.data.total)
                        // Object.assign(this.pageData,resp.data.data)
                        console.log(this.pageData.current)
                        this.pageData.total = resp.data.data.total;
                        this.arranges = resp.data.data.records;
                        console.log(this.arranges)
                        // this.arranges.forEach(function(item,index){
                        //     item.arrangeTime=resp.data.data.records.forEach(function(item,index){
                        //         item[0].arrangeTime
                        //     })
                        // })
                        for (var i = 0; i < this.arranges.length; i++) {
                            console.log(this.arranges[i].arrangeTime)
                            this.arranges[i].arrangeTime = resp.data.data.records[i].arrangeTime.toString();
                        }
                        this.arranges.arrangeTime = resp.data.data.records.toString();
                    }).catch(err => {
                        console.error(err);
                    })
            },
            handleChange(data) {
                console.log(data);
                this.pageData.current = data;
                this.findAllArrange2();
            },
            findDoctors() {
                //alert(this.depId)
                this.$http.get("http://localhost:8088/findDoctors", {
                        params: {
                            depId: this.depId
                        }
                    })
                    .then(resp => {
                        console.log(resp.data.data)
                        this.doctors = resp.data.data
                        this.$http.get("http://localhost:8088/findDepName", {
                                params: {
                                    depId: this.depId
                                }
                            })
                            .then(resp => {
                                //alert(resp.data.message);
                                this.arr.depName = resp.data.data
                            })
                    }).catch(err => {
                        console.error(err);
                    })
            },
            findAllDepartment() {
                this.addFormVisible = true
                this.$http.get("http://localhost:8088/findAllDepartment", {
                        params: {
                            dep: "1"
                        }
                    })
                    .then(resp => {
                        //alert(resp.data.message);
                        this.departments = resp.data.data //得到所有的科室名
                    }).catch(err => {
                        this.$message.err("系统错误")
                        console.error(err);
                    })
            },
            findDoctorName() {
                this.$http.get("http://localhost:8088/findDoctorName", {
                        params: {
                            doctorId: this.docId
                        }
                    })
                    .then(resp => {
                        //alert(resp.data.message)
                        this.arr.doctorName = resp.data.data
                    })

            },
            addArrange() {
                this.showFormVisible = false
                //this.pageData.current=1
                console.log(this.arr.depId)
                this.arr.doctorId = this.docId
                this.arr.depId = this.depId
                this.arr.arrangeTime = this.arrangeTime2,
                    // this.arr.arrangeTime=(this.arrangeTime2.getFullYear()+1)+"-"+(this.arrangeTime2.getMonth())+"-"+(this.arrangeTime2.getDate()+1)
                    console.log(this.arr.arrangeTime)
                if (
                    this.arr.arrangeTime != null &
                    this.arr.doctorId != 0 &
                    this.arr.depId != 0
                ) {
                    this.$http.post("http://localhost:8088/addArrange", this.arr)
                        .then(resp => {
                            console.log(resp.data.data); //如果都不为空才发送请求
                            if (resp.data.success == true) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.arr = {};
                                this.arrangeTime2 = "";
                                this.departments = "";
                                this.depId = "";
                                this.doctors = "";
                                this.docId = "";


                            } else {
                                alert(resp.data.message)
                            }

                        }).catch(err => {
                            console.error(err);
                        })
                } else {
                    alert("有空的")

                }
            },
            changeDate() {
                this.showFormVisible = true;
                console.log(this.arrangeTime2)
                // let datetime=this.arrangeTime2.getFullYear()+"-"+(this.arrangeTime2.getMonth()+1)+"-"+(this.arrangeTime2.getDate())
                // console.log(datetime)
                this.time1 = this.arrangeTime2
            },
            findAllArrange2() {
                console.log(this.arrangeTime)
                this.$http.get("http://localhost:8088/findAllArrange2", {
                        params: {
                            current: this.pageData.current,
                            size: this.pageData.size
                        }
                    })
                    .then(resp => {
                        console.log(resp.data.data); //打印的是result里面的data 即为ipage对象
                        console.log("total为" + resp.data.data.total)
                        // Object.assign(this.pageData,resp.data.data)
                        console.log(this.pageData.current)
                        this.pageData.total = resp.data.data.total;
                        this.arranges = resp.data.data.records;
                    }).catch(err => {
                        console.error(err);
                    })
            },
        },
        mounted() {
            this.findAllArrange2();
            this.findAllDepartment();
        }
    }
</script>